<template>
	<view class="container">
		<view class="form-content">
			<u--input v-model.trim="form.oldPassword" clearable type="password" placeholder="请输入旧密码" shape="circle"
				border="none" fontSize="32rpx"
				:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}"></u--input>


			<template v-if="inputType.pwd">
				<u-input v-model.trim="form.password" clearable type="password" maxlength="20" placeholder="请输入新密码"
					shape="circle" border="none" fontSize="32rpx"
					:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType('pwd')">
							<image src="/static/login/icon-eye-close.png" class="icon-eye"></image>
						</view>
					</template>
				</u-input>
			</template>
			<template v-else>
				<u-input v-model.trim="form.password" clearable type="text" maxlength="20" placeholder="请输入新密码" shape="circle"
					border="none" fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType('pwd')">
							<image src="/static/login/icon-eye-open.png" class="icon-eye"></image>
						</view>
					</template>
				</u-input>
			</template>

			<template v-if="inputType.rePwd">
				<u-input v-model.trim="form.rePassword" clearable type="password" maxlength="20" placeholder="请重复输入新密码"
					shape="circle" border="none" fontSize="32rpx"
					:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType('rePwd')">
							<image src="/static/login/icon-eye-close.png" class="icon-eye" />
						</view>
					</template>
				</u-input>
			</template>
			<template v-else>
				<u-input v-model.trim="form.rePassword" clearable type="text" maxlength="20" placeholder="请重复输入新密码"
					shape="circle" border="none" fontSize="32rpx"
					:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
					<template slot="suffix">
						<view @click="changeInputType('rePwd')">
							<image src="/static/login/icon-eye-open.png" class="icon-eye" />
						</view>
					</template>
				</u-input>
			</template>


			<view class="agreement-text">密码为6-20位，可由数字、字母、符号组成。</view>

			<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle"
				:disabled="!(form.oldPassword&&form.password&&form.rePassword)" @click="savePwdSubmit">保存</u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//密码输入框类型
				inputType: {
					pwd: true,
					rePwd: true
				},
				form: {
					oldPassword: '',
					password: '',
					rePassword: '',
				},
				customButtonStyle: {
					width: '100%',
					height: '76rpx',
					fontSize: '32rpx',
					color: '#FFFFFF',
					marginTop: '40rpx',
				}
			}
		},
		methods: {
			//切换密码输入框类型
			changeInputType(type) {
				this.inputType[type] = !this.inputType[type]
			},

			//提交
			savePwdSubmit() {
				let pwdReg = /^[0-9a-zA-Z\W_]{6,20}$/
				if (!pwdReg.test(this.form.password)) {
					this.$showToast('请输入6~20位由数字、字母、符号组成的密码')
					return
				}

				if (this.form.password.trim() != this.form.rePassword.trim()) {
					this.$showToast('两次密码不一致')
					return
				}
				this.$api.gate_user_changepwd({
					oldpassword: this.form.oldPassword,
					newpassword: this.form.password
				}).then(res => {
					this.$showToast("修改成功")
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 0 36rpx;
	}

	.form-content {

		.icon-eye {
			width: 34rpx;
			height: 34rpx;
			display: block;
		}

		.agreement-text {
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
			margin-top: 18rpx;

			.link {
				color: #999999;
				text-decoration: underline;
			}
		}

		.btn-sure {
			width: 100%;
			height: 76rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 32rpx;
		}

		.register-text {
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			margin-top: 18rpx;
		}
	}
</style>